<template>
  <div v-loading="loading" class="department-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <tree-tools :node-data="titleData" @on-close="toggle" />
      <!-- 树形菜单 -->
      <el-tree :data="departs" :props="defaultProps">
        <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
        <template v-slot="scope">
          <tree-tools :node-data="scope.data" @on-success="onSuccess" @on-close="toggle" />
        </template>
      </el-tree>
    </el-card>
    <add-dept :operate-flag="operateFlag" :is-show-dept.sync="isShowDept" :dlist="dlist" :currentpid="currentpid" @on-success="onSuccess" />
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import { reqGetDepartments } from '@/api/departments'
import AddDept from './components/AddDept.vue'
export default {
  name: 'Depart',
  components: { TreeTools, AddDept },
  data () {
    return {
      // loading效果
      loading: false,
      // 操作类型
      operateFlag: 'add',
      // 原列表数据
      dlist: [],
      // 控制弹窗显示与隐藏
      isShowDept: false,
      // 父级部门id
      currentpid: '',
      // 标题的数据
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },

  created () {
    this.loadDepartments()
  },
  methods: {
    async loadDepartments () {
      // 开启loading
      this.loading = true
      try {
        const ret = await reqGetDepartments()
        if (ret.code === 10000) {
          this.titleData.name = ret.data.companyName
          // 获取原数据
          this.dlist = ret.data.depts
          // 转换成树形数据
          this.departs = this.translateListToTreeData(ret.data.depts, '')
        }
      } catch (err) {
        this.$message.error('获取组织架构数据失败')
        console.dir(err)
      } finally {
        // 隐藏loading
        this.loading = false
      }
    },
    // 把列表数据结构转换为树形数据结构
    // 找到当前部门（根据部门id）的所属的所有子部门
    translateListToTreeData (list, id) {
      // 遍历每一个元素，并且判断每一项pid是否可以参数的pid一致，这样可以找到参数pid所属的下属部门
      const arr = []
      list.forEach(item => {
        if (item.pid === id) {
          // 如果当前部门和父级部门匹配，再去找当前部门的下级部门
          // children就是item的下级所有部门
          const children = this.translateListToTreeData(list, item.id)
          if (children.length > 0) {
            // 证明找到了当前部门的子部门
            item.children = children
          }
          arr.push(item)
        }
      })
      return arr
    },
    onSuccess () {
      this.loadDepartments()
    },
    // 控制弹窗显示与隐藏
    toggle (info) {
      this.isShowDept = true
      this.currentpid = info.pid
      this.operateFlag = info.type
    }

  }

}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
